<template>
  <div>
    <Tips />
    <van-checkbox-group v-model="result">
      <!-- 复选框 -->
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="changeProduChecked(item)"
        :disabled="isEating"
      >
        <!-- 商品渲染 -->
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 删除按钮 -->
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="handleDel(item)"
            />
          </template>
        </van-swipe-cell>
        <!-- 步进器 -->
        <van-stepper
          v-model="item.number"
          v-show="isEating"
          @change="changeStepper(item)"
        />
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交 -->
    <van-submit-bar
      :price="total * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <!-- 全选按钮 -->
      <van-checkbox
        v-model="CheckAll"
        :disabled="isEating || this.cartList.length === 0"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ checkedGoodsCount }}件商品，可点击
        <!-- 编辑按钮 -->
        <van-button
          :type="isEating ? 'danger' : 'primary'"
          size="small"
          @click="towrite"
          >{{ isEating ? "完成编辑" : "编辑" }}</van-button
        >
        进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/ProuductionDetail/Tips";
import {
  GetCartListData,
  GetChangeChecked,
  GetStper,
  DelShop,
} from "@/request/api";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      checked: false,
      // 存放复选框的name属性
      result: [],
      // 购物车列表数组
      cartList: [],
      // 商品选中数组
      checkedList: [],
      // 选中商品总计
      total: 0,
      // 选中商品的数量
      checkedGoodsCount: 0,
      // 步进器是否显示
      isEating: false,
    };
  },
  created() {
    GetCartListData().then((res) => {
      this.renderData(res.data);
      // let { cartList, cartTotal } = res.data;
      // // 更新购物车列表数组
      // this.cartList = cartList;
      // // 更新选中商品的总价
      // this.total = cartTotal.checkedGoodsAmount;
      // // 更新选中商品的数量
      // this.checkedGoodsCount = cartTotal.checkedGoodsCount;
      // console.log(res);
      // this.cartList.map((item) => {
      //   item.checked ? this.result.push(item.id) : "";
      // });
    });
  },
  methods: {
    //封装函数
    renderData(data) {
      this.result = [];
      let { cartList, cartTotal } = data;
      // 更新购物车列表数组
      this.cartList = cartList;
      // 更新选中商品的总价
      this.total = cartTotal.checkedGoodsAmount;
      // 更新选中商品的数量
      this.checkedGoodsCount = cartTotal.checkedGoodsCount;
      // console.log(res);
      this.cartList.map((item) => {
        item.checked ? this.result.push(item.id) : "";
      });
    },
    // 删除商品
    handleDel(item) {
      DelShop({
        productIds: item.product_id.toString(),
      }).then((res) => {
        this.renderData(res.data);
        // console.log(res);
      });
    },
    // 步进器
    changeStepper(item) {
      console.log(item);
      GetStper({
        goodsId: item.goods_id.toString(),
        id: item.id.toString(),
        number: item.number.toString(),
        productId: item.product_id.toString(),
      }).then((res) => {
        console.log(res);
        this.renderData(res.data);
      });
    },

    towrite() {
      this.isEating = !this.isEating;
    },
    onSubmit() {},
    changeProduChecked(item) {
      // console.log(item);
      if (this.isEating) return;
      GetChangeChecked({
        isChecked: item.checked === 1 ? 0 : 1,
        productIds: item.product_id.toString(),
      }).then((res) => {
        // console.log(res);
        this.renderData(res.data);

        // let { cartList, cartTotal } = res.data;
        // // 更新购物车列表数组
        // this.cartList = cartList;
        // // 更新选中商品的总价
        // this.total = cartTotal.checkedGoodsAmount;
        // // 更新选中商品的数量
        // this.checkedGoodsCount = cartTotal.checkedGoodsCount;
        // console.log(res);
        // this.cartList.map((item) => {
        //   item.checked ? this.result.push(item.id) : "";
        // });
      });
    },
  },
  computed: {
    CheckAll: {
      get() {
        return (
          this.result.length === this.cartList.length &&
          this.cartList.length !== 0
        );
      },
      set(val) {
        let ids = this.cartList.map((item) => {
          return item.product_id;
        });
        GetChangeChecked({
          isChecked: val === false ? 0 : 1,
          productIds: ids.join(),
        }).then((res) => {
          this.renderData(res.data);
        });
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  background-color: #fff;
  padding: 0.133333rem;
  margin-top: 0.106667rem;
  .van-card {
    border-bottom: 0.001rem solid #666;
    padding: 0.106667rem 0;
    font-size: 0.16rem;
  }
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar {
  bottom: 0.5rem;
  van-submit-bar_tip {
    display: flex;
    align-items: center;
    .van-buttom {
      margin: 0 0.666667rem;
    }
  }
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
</style>